<template>
  <div>
    <el-card>
      <el-steps :active="active" finish-status="success">
        <el-step title="基础信息"></el-step>
        <el-step title="配货对象"></el-step>
        <el-step title="分货优先级"></el-step>
        <el-step title="业务规则"></el-step>
        <el-step title="分货规则"></el-step>
        <el-step title="系统设置"></el-step>
      </el-steps>

      <I :row="queryParams" v-show="active == 0" width="500px" @next="next" />
      <II :row="queryParams" v-show="active == 1" @prev="prev" @next="next" />
      <III :row="queryParams" v-show="active == 2" @prev="prev" @next="next" />
      <IV :row="queryParams" v-show="active == 3" @prev="prev" @next="next" />
      <V :row="queryParams" v-show="active == 4" @prev="prev" @next="next" />
      <VI :row="queryParams" v-show="active == 5" @prev="prev" @next="next" />
    </el-card>
    <!-- <el-button style="margin-top: 12px" @click="pre">上一步</el-button>
    <el-button style="margin-top: 12px" @click="next">下一步</el-button> -->
  </div>
</template>

<script>
import I from "./I";
import II from "./II";
import III from "./III";
import IV from "./IV";
import V from "./V";
import VI from "./VI";
export default {
  components: { I, II, III, IV, V, VI },
  props: {
    rowitem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      active: 0,
      queryParams: {},
      // span: 1,
    };
  },
  watch: {
    rowitem: {
      handler: function (newnew, oldold) {
        this.queryParams = this.rowitem;
        // this.getList();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // console.log(JSON.stringify(this.$route.query.obj));
    if (this.$route.query.obj) {
      this.queryParams = this.$route.query.obj;
      console.log(JSON.stringify(this.queryParams));
      // this.getList();
    }

    // this.provincearr = province
  },
  methods: {
    // spanChange(val) {},
    next() {
      // if (this.active++ > 2) this.active = 0;
      this.active++;
    },
    prev() {
      // if (this.active-- == 0) return;
      this.active--;
    },
  },
};
</script>

